<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>036-一个feMorphology滤镜</title>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <defs>
            <filter id="Erode1">
                <feMorphology operator="erode" in="SourceGraphic" radius="1" />
            </filter>
            <filter id="Erode3">
                <feMorphology operator="erode" in="SourceGraphic" radius="3" />
            </filter>
            <filter id="Erode4">
                <feMorphology operator="erode" in="SourceGraphic" radius="4" />
            </filter>
            <filter id="Dilate1">
                <feMorphology operator="dilate" in="SourceGraphic" radius="1" />
            </filter>
            <filter id="Dilate3">
                <feMorphology operator="dilate" in="SourceGraphic" radius="3" />
            </filter>
            <filter id="Dilate4">
                <feMorphology operator="dilate" in="SourceGraphic" radius="4" />
            </filter>
        </defs>
        <g enable-background="new">
            <g font-family="Verdana" font-size="50" stroke="red" stroke-width="4">
                <text x="50" y="60">Unfiltered</text>
                <text x="50" y="120" filter="url(#Erode1)">Erode 1</text>
                <text x="50" y="180" filter="url(#Erode3)">Erode 3</text>
                <text x="50" y="240" filter="url(#Erode4)">Erode 4</text>
                <text x="50" y="300" filter="url(#Dilate1)">Dilate 1</text>
                <text x="50" y="360" filter="url(#Dilate3)">Dilate 3</text>
                <text x="50" y="420" filter="url(#Dilate4)">Dilate 4</text>
            </g>
        </g>
    </svg>
</body>

</html>